<template>
  <div class="app-iframe">
    <!-- <iframe class="iframe" src="http://localhost:85/index" frameborder="0">
    </iframe> -->
    <div class="web">
      <div class="web-top">
        <TopButton @handleClick="topClick"></TopButton>
      </div>
      <div class="web-left page">
        <!-- <iframe
          class="iframe"
          src="http://localhost:85/dangerLeft"
          frameborder="0"
        >
        </iframe> -->
        <Enterprise v-if="active == 'qiye'"></Enterprise>
        <DangerLeft v-if="active == 'danger'"></DangerLeft>
        <EmergencyLeft v-if="active == 'emergency'"></EmergencyLeft>
        <RiskLeft v-if="active == 'risk'"></RiskLeft>
      </div>
      <div class="web-right page">
        <DangerRight v-if="active == 'danger'"></DangerRight>
        <EmergencyRight v-if="active == 'emergency'"></EmergencyRight>
        <RiskRight v-if="active == 'risk'"></RiskRight>
      </div>
    </div>
  </div>
</template>
<script setup>
import TopButton from "./components/TopButtons.vue";
import DangerLeft from "./pages/dangerLeft.vue";
import DangerRight from "./pages/dangerRight.vue";
import EmergencyLeft from "./pages/emergencyLeft.vue";
import EmergencyRight from "./pages/emergencyRight.vue";
import RiskLeft from "./pages/riskLeft.vue";
import RiskRight from "./pages/riskRight.vue";
import Enterprise from "./pages/enterprise.vue";
import JK from "./components/jkDialog.vue";
import { createSocket, closeSoket } from "./websocket";
const active = ref("danger");
const jkref = ref();

const topClick = (type) => {
  active.value = type;
  // jkref.value.open({});
};
// createSocket("ws://114.117.242.249:38080/websocket/web");
// closeSoket();
</script>

<style lang="scss" scoped>
.app-iframe {
  width: 100%;
  height: 980px;

  .iframe {
    width: 100%;
    height: 100%;
    position: fixed;
  }
}

.web {
  padding: 20px 10px 10px 10px;
  position: relative;
  // z-index: 999;
  // height: 100%;
  box-sizing: border-box;
  .web-top {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -870px;
  }

  .web-left {
    position: absolute;
    left: 20px;
  }
  .web-right {
    position: absolute;
    right: 20px;
  }

  .page {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    width: 418px;
    height: 934px;
    color: #fff;
  }
}

.app-iframe {
  background-image: url("../../assets/images/threeD.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}
</style>
